<script setup>
// 组件
import NavMenu from '../components/NavMenu.vue'
import {useCounterStore} from "@/stores/counter.js";
import {useRouter} from 'vue-router'
import {ref} from "vue";

const counter = useCounterStore();
const router = useRouter()

let hoverState=ref(false)

</script>


<template>
  <el-container>
    <el-header class="header">
      <span style="font-size: 22px;color:#F5F5F5">东软云HIS系统</span>
      <span style="margin-right:15px; margin-left:400px;font-weight: 400;font-size: 14px;">用户：{{counter.vo_user.value.userName}} </span>
      <el-button type="text" @click="router.push('/login')"
                 :style="{
                          fontSize: '16px',
                          marginLeft: '100px',
                          color: hoverState ? '#666666' : '#333333',  /* 动态切换颜色 */
                          transition: 'color 0.2s'  /* 添加过渡效果，使变化更平滑 */
                        }"
                 @mouseenter="hoverState = true"
                 @mouseleave="hoverState = false" >退出登录
      </el-button>
    </el-header>
    <el-container class="container">
      <el-aside width="220px" class="aside">
        <NavMenu></NavMenu>
      </el-aside>
      <el-main class="content">
        <RouterView></RouterView>
      </el-main>
    </el-container>
  </el-container>


</template>


<style>

/* 样式 */
.header {
  background-color: #B19CD9;
  font-size: 20px; /* 标题放大 */
  font-weight: bold;
  line-height: 60px; /* 保持垂直居中 */
  text-align: right;
}


/* container */
.container {
  height: calc(100vh - 60px);
}


.aside {
  background-color: #B19CD9;
}

.content {

  background-color: #F5F5F5;

}

</style>